<template>
  <div class="app-container" style="grid-template-columns: auto;">

    <div class="rightSidebar">
      <el-card class="rightSidebarTop box-card">
        <div slot="header">
          <span class="lumpText">项目基本信息</span>
        </div>
        <div class="content2">
          <el-descriptions class="margin-top" title="客户信息" :column="3" border>
            <el-descriptions-item>
              <template slot="label">
                对接单位
              </template>
              {{ InfoCardObj.unit }}
            </el-descriptions-item>
            <el-descriptions-item span="2">
              <template slot="label">
                对接单位详细地址
              </template>
              {{ InfoCardObj.address }}
            </el-descriptions-item>

            <template v-for="(person, index) in persons">
              <el-descriptions-item :key="index">
                <template slot="label">
                  对接人{{ index + 1 }}
                </template>
                {{ person.recepter }}
              </el-descriptions-item>
              <el-descriptions-item :key="index + 'dept'">
                <template slot="label">
                  对接人部门职位{{ index + 1 }}
                </template>
                {{ person.deptPost }}
              </el-descriptions-item>
              <el-descriptions-item :key="index + 'phone'">
                <template slot="label">
                  对接人联系方式{{ index + 1 }}
                </template>
                {{ person.phone }}
              </el-descriptions-item>
            </template>
          </el-descriptions>

          <el-descriptions class="margin-top" title="项目信息" :column="3" border>
            <el-descriptions-item>
              <template slot="label">
                项目名称
              </template>
              {{ InfoCardObj.projectName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                项目类型
              </template>
              <dict-tag class="ListValue" :options="dict.type.project_type" :value="InfoCardObj.projectType"/>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                介绍人
              </template>
              {{ InfoCardObj.introducer }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                总负责人
              </template>
              {{ getUserName() }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                组员
              </template>
              <span id="userList" @change="hiddenUser">
             <span v-for="(user, index) in userOptions" :key="user.userId">
              <span v-if="InfoCardObj.userIds.includes(user.userId)">
              {{ user.nickName }}
                <!--               <template v-if="index < InfoCardObj.userIds.length - 1">、</template>-->
              </span>
            </span>
          </span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                项目预算
              </template>
              {{ InfoCardObj.projectBudget }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                项目开始日期
              </template>
              {{ InfoCardObj.projectStartDate }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                项目结束日期
              </template>
              {{ InfoCardObj.projectEndDate }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                备注
              </template>
              {{ InfoCardObj.remark }}
            </el-descriptions-item>
          </el-descriptions>
        </div>

      </el-card>

      <!--下半部分项目阶段?-->
      <el-card class="rightSidebarTop box-card">
        <div slot="header">
          <span class="lumpText">项目阶段</span>
        </div>
        <div class="content1">
          <div style="display: flex;margin-left: 3%;margin-right: 0%;margin-top: 1.5%;">
            <div class="stage margin">
              <div style="display: flex;margin-top: 25px;" class="stageFont">
                <img src="@/assets/images/stageIcon/对接.png" class="iconStart"/>
                <div class="stageTitle">对接阶段</div>

                <div class="workDiv">
                  <span v-if="this.form.stepStatus === 2" class="workText">已完结</span>
                  <span v-else-if="this.form.stepStatus === 1" class="workText">进行中</span>
                  <span v-else class="workText">未开始</span>
                  <img v-if="this.form.stepStatus === 2" src="@/assets/images/stageIcon/完成的阶段.png" alt=""
                       class="workIcon">
                  <img v-else-if="this.form.stepStatus === 1" src="@/assets/images/stageIcon/正在进行的阶段.png" alt=""
                       class="workIcon">
                  <img v-else src="@/assets/images/stageIcon/未完成的阶段.png" alt=""
                       class="workIcon">
                </div>
              </div>

              <div class="stageFont centerPosition" style="margin-top: 20px;font-weight: bold;">
                执行天数：{{ this.form.implDays == null ? null : this.form.implDays + 1 }}天
              </div>
              <div class="centerPosition" style="margin-top: 18px;">{{
                  this.form.stepStartDate
                }}~{{ this.form.stepEndDate }}
              </div>
              <div class="centerPosition" style="margin-top: 27px;margin-left: 20px;margin-right: 20px">
                <!--完结阶段再做一个按钮-->
                <button class="runContentButton1" v-on:click="openDockStage()" onmousemove="">阶段预设</button>
                <button v-if="this.form.stepStatus >= 1" class="runContentButton1" v-on:click="openDockStage()"
                        onmousemove="">文件上传
                </button>
                <button v-if="this.form.stepStatus != 2" class="runContentButton1" v-on:click="stageOver1()"
                        onmousemove="">阶段完结
                </button>

              </div>
            </div>

            <div class="stage margin">
              <div style="display: flex;margin-top: 25px;" class="stageFont">
                <img src="@/assets/images/stageIcon/勘察.png" class="iconStart"/>
                <div class="stageTitle">勘察阶段</div>

                <div class="workDiv">
                  <span v-if="this.kcForm.stepStatus === 2" class="workText">已完结</span>
                  <span v-else-if="this.kcForm.stepStatus === 1" class="workText">进行中</span>
                  <span v-else class="workText">未开始</span>
                  <img v-if="this.kcForm.stepStatus === 2" src="@/assets/images/stageIcon/完成的阶段.png" alt=""
                       class="workIcon">
                  <img v-else-if="this.kcForm.stepStatus === 1" src="@/assets/images/stageIcon/正在进行的阶段.png" alt=""
                       class="workIcon">
                  <img v-else src="@/assets/images/stageIcon/未完成的阶段.png" alt=""
                       class="workIcon">
                </div>
              </div>

              <div class="stageFont centerPosition " style="margin-top: 20px;font-weight: bold;">
                执行天数：{{ this.kcForm.implDays == null ? null : this.kcForm.implDays + 1 }}天
              </div>
              <div class="centerPosition" style="margin-top: 18px;">{{
                  this.kcForm.stepStartDate
                }}~{{ this.kcForm.stepEndDate }}
              </div>
              <div class="centerPosition" style="margin-top: 27px;margin-left: 20px;margin-right: 20px">
                <button class="runContentButton1" v-on:click="openExplorationStage()" onmousemove="">阶段预设</button>

                <button class="runContentButton1" @click="redirectToKcStageDetail">阶段详情</button>
                <button v-if="this.kcForm.stepStatus != 2" class="runContentButton1" v-on:click="stageOver2()"
                        onmousemove="">阶段完结
                </button>
              </div>
            </div>

            <div class="stage margin">
              <div style="display: flex;margin-top: 25px;" class="stageFont">
                <img src="@/assets/images/stageIcon/方案编制.png" class="iconStart"/>
                <div class="stageTitle">方案编制阶段</div>

                <div class="workDiv">
                  <span v-if="this.fabzForm.stepStatus === 2" class="workText">已完结</span>
                  <span v-else-if="this.fabzForm.stepStatus === 1" class="workText">进行中</span>
                  <span v-else class="workText">未开始</span>
                  <img v-if="this.fabzForm.stepStatus === 2" src="@/assets/images/stageIcon/完成的阶段.png" alt=""
                       class="workIcon">
                  <img v-else-if="this.fabzForm.stepStatus === 1" src="@/assets/images/stageIcon/正在进行的阶段.png" alt=""
                       class="workIcon">
                  <img v-else src="@/assets/images/stageIcon/未完成的阶段.png" alt=""
                       class="workIcon">
                </div>
              </div>

              <div class="stageFont centerPosition " style="margin-top: 20px;font-weight: bold;">
                执行天数：{{ this.fabzForm.implDays == null ? null : this.fabzForm.implDays + 1 }}天
              </div>
              <div class="centerPosition" style="margin-top: 18px;">{{
                  this.fabzForm.stepStartDate
                }}~{{ this.fabzForm.stepEndDate }}
              </div>
              <div class="centerPosition" style="margin-top: 27px;margin-left: 20px;margin-right: 20px">
                <button class="runContentButton1"
                        v-on:click="openPlanPreparationStage()">阶段预设
                </button>
                <button class="runContentButton1"
                        v-on:click="redirectToFabzStageDetail">阶段详情
                </button>
                <button v-if="this.fabzForm.stepStatus != 2" class="runContentButton1" v-on:click="stageOver3()"
                        onmousemove="">阶段完结
                </button>
              </div>
            </div>

<!--            <div class="stage margin">-->
<!--              <div style="display: flex;margin-top: 25px;" class="stageFont">-->
<!--                <img src="@/assets/images/stageIcon/方案汇报.png" class="iconStart"/>-->
<!--                <div class="stageTitle">方案汇报阶段</div>-->

<!--                <div class="workDiv">-->
<!--                  <span v-if="this.fahbForm.stepStatus === 2" class="workText">已完结</span>-->
<!--                  <span v-else-if="this.fahbForm.stepStatus === 1" class="workText">进行中</span>-->
<!--                  <span v-else class="workText">未开始</span>-->
<!--                  <img v-if="this.fahbForm.stepStatus === 2" src="@/assets/images/stageIcon/完成的阶段.png" alt=""-->
<!--                       class="workIcon">-->
<!--                  <img v-else-if="this.fahbForm.stepStatus === 1" src="@/assets/images/stageIcon/正在进行的阶段.png" alt=""-->
<!--                       class="workIcon">-->
<!--                  <img v-else src="@/assets/images/stageIcon/未完成的阶段.png" alt=""-->
<!--                       class="workIcon">-->
<!--                </div>-->
<!--              </div>-->

<!--              <div class="stageFont centerPosition " style="margin-top: 20px;font-weight: bold;">-->
<!--                执行天数：{{ this.fahbForm.implDays == null ? null : this.fahbForm.implDays + 1 }}天-->
<!--              </div>-->
<!--              <div class="centerPosition" style="margin-top: 18px;">{{-->
<!--                  this.fahbForm.stepStartDate-->
<!--                }}~{{ this.fahbForm.stepEndDate }}-->
<!--              </div>-->
<!--              <div class="centerPosition" style="margin-top: 27px;margin-left: 20px;margin-right: 20px">-->
<!--                <button class="runContentButton1" v-on:click="openPlanReportStage()">阶段预设</button>-->
<!--                <button class="runContentButton1"-->
<!--                        v-on:click="redirectToFahbStageDetail">阶段详情-->
<!--                </button>-->
<!--                <button v-if="this.fahbForm.stepStatus != 2" class="runContentButton1" v-on:click="stageOver4()"-->
<!--                        onmousemove="">阶段完结-->
<!--                </button>-->
<!--              </div>-->
<!--            </div>-->

            <div class="stage margin">
              <div style="display: flex;margin-top: 25px;" class="stageFont">
                <img src="@/assets/images/stageIcon/报价.png" class="iconStart"/>
                <div class="stageTitle">报价阶段</div>

                <div class="workDiv">
                  <span v-if="this.bjForm.stepStatus === 2" class="workText">已完结</span>
                  <span v-else-if="this.bjForm.stepStatus === 1" class="workText">进行中</span>
                  <span v-else class="workText">未开始</span>
                  <img v-if="this.bjForm.stepStatus === 2" src="@/assets/images/stageIcon/完成的阶段.png" alt=""
                       class="workIcon">
                  <img v-else-if="this.bjForm.stepStatus === 1" src="@/assets/images/stageIcon/正在进行的阶段.png" alt=""
                       class="workIcon">
                  <img v-else src="@/assets/images/stageIcon/未完成的阶段.png" alt=""
                       class="workIcon">
                </div>
              </div>

              <div class="stageFont centerPosition " style="margin-top: 20px;font-weight: bold;">
                执行天数：{{ this.bjForm.implDays == null ? null : this.bjForm.implDays + 1 }}天
              </div>
              <div class="centerPosition" style="margin-top: 18px;">{{
                  this.bjForm.stepStartDate
                }}~{{ this.bjForm.stepEndDate }}
              </div>
              <div class="centerPosition" style="margin-top: 27px;margin-left: 20px;margin-right: 20px">
                <button class="runContentButton1" v-on:click="openQuotationStage()">阶段预设</button>
                <button class="runContentButton1"
                        v-on:click="redirectToBjStageDetail">阶段详情
                </button>
                <button v-if="this.bjForm.stepStatus != 2" class="runContentButton1" v-on:click="stageOver5()"
                        onmousemove="">阶段完结
                </button>
              </div>
            </div>

          </div>

          <div style="display: flex;margin-top:2.2%;margin-left: 3%;">

            <div class="stage margin">
              <div style="display: flex;margin-top: 25px;" class="stageFont">
                <img src="@/assets/images/stageIcon/合同签订.png" class="iconStart"/>
                <div class="stageTitle">合同签订阶段</div>

                <div class="workDiv">
                  <span v-if="this.htqdForm.stepStatus === 2" class="workText">已完结</span>
                  <span v-else-if="this.htqdForm.stepStatus === 1" class="workText">进行中</span>
                  <span v-else class="workText">未开始</span>
                  <img v-if="this.htqdForm.stepStatus === 2" src="@/assets/images/stageIcon/完成的阶段.png" alt=""
                       class="workIcon">
                  <img v-else-if="this.htqdForm.stepStatus === 1" src="@/assets/images/stageIcon/正在进行的阶段.png" alt=""
                       class="workIcon">
                  <img v-else src="@/assets/images/stageIcon/未完成的阶段.png" alt="" class="workIcon">
                  <!--                  <div style="clear: both;"></div>-->
                </div>
              </div>

              <div class="stageFont centerPosition " style="margin-top: 20px;font-weight: bold;">
                执行天数：{{ this.htqdForm.implDays == null ? null : this.htqdForm.implDays + 1 }}天
              </div>
              <div class="centerPosition" style="margin-top: 18px;">{{
                  this.htqdForm.stepStartDate
                }}~{{ this.htqdForm.stepEndDate }}
              </div>
              <div class="centerPosition" style="margin-top: 27px;margin-left: 20px;margin-right: 20px">
                <button class="runContentButton1" v-on:click="openContractSignStage()">阶段预设</button>
                <button class="runContentButton1"
                        v-on:click="redirectToHtqdStageDetail">阶段详情
                </button>
                <button v-if="this.htqdForm.stepStatus != 2" class="runContentButton1" v-on:click="stageOver8()"
                        onmousemove="">阶段完结
                </button>
              </div>
            </div>

            <div class="stage margin">
              <div style="display: flex;margin-top: 25px;" class="stageFont">
                <img src="@/assets/images/stageIcon/施工.png" class="iconStart"/>
                <div class="stageTitle">施工阶段</div>

                <div class="workDiv">
                  <span v-if="this.sgForm.stepStatus === 2" class="workText">已完结</span>
                  <span v-else-if="this.sgForm.stepStatus === 1" class="workText">进行中</span>
                  <span v-else class="workText">未开始</span>
                  <img v-if="this.sgForm.stepStatus === 2" src="@/assets/images/stageIcon/完成的阶段.png" alt=""
                       class="workIcon">
                  <img v-else-if="this.sgForm.stepStatus === 1" src="@/assets/images/stageIcon/正在进行的阶段.png" alt=""
                       class="workIcon">
                  <img v-else src="@/assets/images/stageIcon/未完成的阶段.png" alt=""
                       class="workIcon">
                </div>
              </div>

              <div class="stageFont centerPosition " style="margin-top: 20px;font-weight: bold;">
                执行天数：{{ this.sgForm.implDays == null ? null : this.sgForm.implDays + 1 }}天
              </div>
              <div class="centerPosition" style="margin-top: 18px;">{{
                  this.sgForm.stepStartDate
                }}~{{ this.sgForm.stepEndDate }}
              </div>
              <div class="centerPosition" style="margin-top: 27px;margin-left: 20px;margin-right: 20px">
                <button class="runContentButton1" v-on:click="openConstructionStage()">阶段预设</button>
                <button class="runContentButton1"
                        v-on:click="redirectToSgStageDetail">阶段详情
                </button>
                <button v-if="this.sgForm.stepStatus != 2" class="runContentButton1" v-on:click="stageOver6()"
                        onmousemove="">阶段完结
                </button>
              </div>
            </div>

            <div class="stage margin">
              <div style="display: flex;margin-top: 25px;" class="stageFont">
                <img src="@/assets/images/stageIcon/验收.png" class="iconStart"/>
                <div class="stageTitle">验收阶段</div>

                <div class="workDiv">
                  <span v-if="this.ysForm.stepStatus === 2" class="workText">已完结</span>
                  <span v-else-if="this.ysForm.stepStatus === 1" class="workText">进行中</span>
                  <span v-else class="workText">未开始</span>
                  <img v-if="this.ysForm.stepStatus === 2" src="@/assets/images/stageIcon/完成的阶段.png" alt=""
                       class="workIcon">
                  <img v-else-if="this.ysForm.stepStatus === 1" src="@/assets/images/stageIcon/正在进行的阶段.png" alt=""
                       class="workIcon">
                  <img v-else src="@/assets/images/stageIcon/未完成的阶段.png" alt=""
                       class="workIcon">
                </div>
              </div>

              <div class="stageFont centerPosition " style="margin-top: 20px;font-weight: bold;">
                执行天数：{{ this.ysForm.implDays == null ? null : this.ysForm.implDays + 1 }}天
              </div>
              <div class="centerPosition" style="margin-top: 18px;">{{
                  this.ysForm.stepStartDate
                }}~{{ this.ysForm.stepEndDate }}
              </div>
              <div class="centerPosition" style="margin-top: 27px;margin-left: 20px;margin-right: 20px">
                <button class="runContentButton1" v-on:click="openAcceptStage()">阶段预设</button>

                <button class="runContentButton1"
                        v-on:click="redirectToYsStageDetail">阶段详情
                </button>
                <button v-if="this.ysForm.stepStatus != 2" class="runContentButton1" v-on:click="stageOver7()"
                        onmousemove="">阶段完结
                </button>
              </div>
            </div>

            <div class="stage1 margin">

            </div>

          </div>
        </div>
      </el-card>
    </div>


    <!-- 添加或修改对接阶段对话框 -->
    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="openDock" width="500px" append-to-body
               class="dialogStyle" :before-close="handleClose1">
      <el-form ref="form" :model="form" :rules="rules" label-width="85px" style="margin-top: 8px;">
        <el-form-item label="负责人" prop="stepLeader">
          <el-select filterable v-model="form.stepLeader" placeholder="请选择负责人" @change="updateStepUsers1">
            <el-option
              v-for="item in stepUserOptions1"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组员">
          <el-select filterable v-model="form.stepUserIds" multiple placeholder="请选择组员">
            <el-option
              v-for="item in stepUserOptions1"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="执行日期" prop="dateArray">
          <el-date-picker clearable
                          v-model="form.dateArray"
                          unlink-panels
                          value-format="yyyy-MM-dd"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          :picker-options="executeTimeOptions">
            >
          </el-date-picker>
        </el-form-item>

        <!--        <el-form-item label="测试时间">-->
        <!--          <el-time-picker-->
        <!--            is-range-->
        <!--            v-model="time"-->
        <!--            value-format="yyyy-MM-dd HH:mm:ss"-->
        <!--            range-separator="至"-->
        <!--            start-placeholder="开始时间"-->
        <!--            end-placeholder="结束时间"-->
        <!--            placeholder="选择时间范围">-->
        <!--          </el-time-picker>-->
        <!--        </el-form-item>-->

        <!--        <el-form-item label="测试日期选择限制" prop="csDate">-->
        <!--          <el-date-picker-->
        <!--            v-model="value1"-->
        <!--            type="date"-->
        <!--            placeholder="选择日期"-->
        <!--            :picker-options="executeTimeOptions">-->
        <!--          </el-date-picker>-->
        <!--        </el-form-item>-->

      </el-form>

      <div class="stageYSButton">
        <el-button type="primary" @click="submitForm1">确 定</el-button>
        <!--        <el-button v-if="InfoCardObj.projectStep <= 1" type="primary" @click="submitForm1">确 定</el-button>-->
        <!--        <el-button v-else type="info" @click="submitForm1" disabled>确 定</el-button>-->
        <el-button @click="cancel1">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改勘察阶段对话框 -->
    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="openKc" width="500px" append-to-body
               class="dialogStyle" :before-close="handleClose2">
      <el-form ref="kcForm" :model="kcForm" :rules="rules" label-width="85px" style="margin-top: 8px;">
        <el-form-item label="负责人" prop="stepLeader">
          <el-select filterable v-model="kcForm.stepLeader" placeholder="请选择负责人" @change="updateStepUsers2">
            <el-option
              v-for="item in stepUserOptions2"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组员">
          <el-select filterable v-model="kcForm.stepUserIds" multiple placeholder="请选择组员">
            <el-option
              v-for="item in stepUserOptions2"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="执行日期" prop="dateArray">
          <el-date-picker clearable
                          v-model="kcForm.dateArray"
                          unlink-panels
                          value-format="yyyy-MM-dd"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          :picker-options="executeTimeOptions">
            >
          </el-date-picker>
        </el-form-item>

      </el-form>

      <div class="stageYSButton">
        <el-button type="primary" @click="submitForm2">确 定</el-button>
        <!--        <el-button v-if="InfoCardObj.projectStep <= 2" type="primary" @click="submitForm2">确 定</el-button>-->
        <!--        <el-button v-else type="info" @click="submitForm2" disabled>确 定</el-button>-->
        <el-button @click="cancel2">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改方案编制阶段对话框 -->
    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="openFabz" width="500px" append-to-body
               class="dialogStyle" :before-close="handleClose3">
      <el-form ref="fabzForm" :model="fabzForm" :rules="rules" label-width="85px" style="margin-top: 8px;">
        <el-form-item label="负责人" prop="stepLeader">
          <el-select filterable v-model="fabzForm.stepLeader" placeholder="请选择负责人" @change="updateStepUsers3">
            <el-option
              v-for="item in stepUserOptions3"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组员">
          <el-select filterable v-model="fabzForm.stepUserIds" multiple placeholder="请选择组员">
            <el-option
              v-for="item in stepUserOptions3"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="执行日期" prop="dateArray">
          <el-date-picker clearable
                          v-model="fabzForm.dateArray"
                          unlink-panels
                          value-format="yyyy-MM-dd"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          :picker-options="executeTimeOptions">
            >
          </el-date-picker>
        </el-form-item>

      </el-form>

      <div class="stageYSButton">
        <el-button type="primary" @click="submitForm3">确 定</el-button>
        <!--        <el-button v-if="InfoCardObj.projectStep <= 3" type="primary" @click="submitForm3">确 定</el-button>-->
        <!--        <el-button v-else type="info" @click="submitForm3" disabled>确 定</el-button>-->
        <el-button @click="cancel3">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改方案汇报阶段对话框 -->
    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="openFahb" width="500px" append-to-body
               class="dialogStyle" :before-close="handleClose4">
      <el-form ref="fahbForm" :model="fahbForm" :rules="rules" label-width="85px" style="margin-top: 8px;">
        <el-form-item label="负责人" prop="stepLeader">
          <el-select filterable v-model="fahbForm.stepLeader" placeholder="请选择负责人" @change="updateStepUsers4">
            <el-option
              v-for="item in stepUserOptions4"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组员">
          <el-select filterable v-model="fahbForm.stepUserIds" multiple placeholder="请选择组员">
            <el-option
              v-for="item in stepUserOptions4"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="执行日期" prop="dateArray">
          <el-date-picker clearable
                          v-model="fahbForm.dateArray"
                          unlink-panels
                          value-format="yyyy-MM-dd"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          :picker-options="executeTimeOptions">
            >
          </el-date-picker>
        </el-form-item>

      </el-form>

      <div class="stageYSButton">
        <el-button type="primary" @click="submitForm4">确 定</el-button>
        <!--        <el-button v-if="InfoCardObj.projectStep <= 4" type="primary" @click="submitForm4">确 定</el-button>-->
        <!--        <el-button v-else type="info" @click="submitForm4" disabled>确 定</el-button>-->
        <el-button @click="cancel4">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改报价阶段对话框 -->
    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="openBj" width="500px" append-to-body
               class="dialogStyle" :before-close="handleClose5">
      <el-form ref="bjForm" :model="bjForm" :rules="rules" label-width="85px" style="margin-top: 8px;">
        <el-form-item label="负责人" prop="stepLeader">
          <el-select filterable v-model="bjForm.stepLeader" placeholder="请选择负责人" @change="updateStepUsers5">
            <el-option
              v-for="item in stepUserOptions5"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组员">
          <el-select filterable v-model="bjForm.stepUserIds" multiple placeholder="请选择组员">
            <el-option
              v-for="item in stepUserOptions5"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="执行日期" prop="dateArray">
          <el-date-picker clearable
                          v-model="bjForm.dateArray"
                          unlink-panels
                          value-format="yyyy-MM-dd"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          :picker-options="executeTimeOptions">
            >
          </el-date-picker>
        </el-form-item>

      </el-form>

      <div class="stageYSButton">
        <el-button type="primary" @click="submitForm5">确 定</el-button>
        <!--        <el-button v-if="InfoCardObj.projectStep <= 5" type="primary" @click="submitForm5">确 定</el-button>-->
        <!--        <el-button v-else type="info" @click="submitForm5" disabled>确 定</el-button>-->
        <el-button @click="cancel5">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改施工阶段对话框 -->
    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="openSg" width="500px" append-to-body
               class="dialogStyle" :before-close="handleClose6">
      <el-form ref="sgForm" :model="sgForm" :rules="rules" label-width="85px" style="margin-top: 8px;">
        <el-form-item label="负责人" prop="stepLeader">
          <el-select filterable v-model="sgForm.stepLeader" placeholder="请选择负责人" @change="updateStepUsers6">
            <el-option
              v-for="item in stepUserOptions6"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组员">
          <el-select filterable v-model="sgForm.stepUserIds" multiple placeholder="请选择组员">
            <el-option
              v-for="item in stepUserOptions6"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="执行日期" prop="dateArray">
          <el-date-picker clearable
                          v-model="sgForm.dateArray"
                          unlink-panels
                          value-format="yyyy-MM-dd"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          :picker-options="executeTimeOptions">
            >
          </el-date-picker>
        </el-form-item>

      </el-form>

      <div class="stageYSButton">
        <el-button type="primary" @click="submitForm6">确 定</el-button>
        <!--        <el-button v-if="InfoCardObj.projectStep <= 6" type="primary" @click="submitForm6">确 定</el-button>-->
        <!--        <el-button v-else type="info" @click="submitForm6" disabled>确 定</el-button>-->
        <el-button @click="cancel6">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改验收阶段对话框 -->
    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="openYs" width="500px" append-to-body
               class="dialogStyle" :before-close="handleClose7">
      <el-form ref="ysForm" :model="ysForm" :rules="rules" label-width="85px" style="margin-top: 8px;">
        <el-form-item label="负责人" prop="stepLeader">
          <el-select filterable v-model="ysForm.stepLeader" placeholder="请选择负责人" @change="updateStepUsers7">
            <el-option
              v-for="item in stepUserOptions7"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组员">
          <el-select filterable v-model="ysForm.stepUserIds" multiple placeholder="请选择组员">
            <el-option
              v-for="item in stepUserOptions7"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="执行日期" prop="dateArray">
          <el-date-picker clearable
                          v-model="ysForm.dateArray"
                          unlink-panels
                          value-format="yyyy-MM-dd"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          :picker-options="executeTimeOptions">
            >
          </el-date-picker>
        </el-form-item>

      </el-form>

      <div class="stageYSButton">
        <el-button type="primary" @click="submitForm7">确 定</el-button>
        <!--        <el-button v-if="InfoCardObj.projectStep <= 7" type="primary" @click="submitForm7">确 定</el-button>-->
        <!--        <el-button v-else type="info" @click="submitForm7" disabled>确 定</el-button>-->
        <el-button @click="cancel7">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改合同签订阶段对话框 -->
    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="openHtqd" width="500px" append-to-body
               class="dialogStyle" :before-close="handleClose8">
      <el-form ref="htqdForm" :model="htqdForm" :rules="rules" label-width="85px" style="margin-top: 8px;">
        <el-form-item label="负责人" prop="stepLeader">
          <el-select filterable v-model="htqdForm.stepLeader" placeholder="请选择负责人" @change="updateStepUsers8">
            <el-option
              v-for="item in stepUserOptions8"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组员">
          <el-select filterable v-model="htqdForm.stepUserIds" multiple placeholder="请选择组员">
            <el-option
              v-for="item in stepUserOptions8"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="执行日期" prop="dateArray">
          <el-date-picker clearable
                          v-model="htqdForm.dateArray"
                          unlink-panels
                          value-format="yyyy-MM-dd"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          :picker-options="executeTimeOptions">
            >
          </el-date-picker>
        </el-form-item>

      </el-form>

      <div class="stageYSButton">
        <el-button type="primary" @click="submitForm8">确 定</el-button>
        <!--        <el-button v-if="InfoCardObj.projectStep <= 8" type="primary" @click="submitForm8">确 定</el-button>-->
        <!--        <el-button v-else type="info" @click="submitForm8" disabled>确 定</el-button>-->
        <el-button @click="cancel8">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  listInfo,
  getInfo,
  delInfo,
  addInfo,
  updateInfo,
} from "@/api/project/info";
import {getStep, delStep, submitStep, stageOver} from "@/api/project/step";
import stageCommonForm from "../../../components/StageFillInformation/stageCommonForm.vue";
import { EventBus } from '@/main';
export default {
  name: "ProjectInfo",
  dicts: ['project_step', 'project_type', 'step_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      executeTimeOptions: {
        disabledDate: (time) => {
          if (this.InfoCardObj.projectStartDate && this.InfoCardObj.projectEndDate) {
            // console.log(time.getTime(),new Date(this.InfoCardObj.projectStartDate).getTime(), new Date(this.InfoCardObj.projectEndDate).getTime() )
            return time.getTime() > new Date(this.InfoCardObj.projectEndDate).getTime() || time.getTime() + 86400000 < new Date(this.InfoCardObj.projectStartDate).getTime();
          }
        }
      },
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示对接阶段阶段预设页
      openDock: false,
      // 是否显示勘察阶段阶段预设页
      openKc: false,
      // 是否显示方案编制阶段阶段预设页
      openFabz: false,
      // 是否显示方案汇报阶段阶段预设页
      openFahb: false,
      // 是否显示报价阶段阶段预设页
      openBj: false,
      // 是否显示施工阶段阶段预设页
      openSg: false,
      // 是否显示验收阶段阶段预设页
      openYs: false,
      // 是否显示合同签订阶段阶段预设页
      openHtqd: false,
      // 对接阶段表单参数
      form: {
        projectId: null,
        dateArray: null,
        implDays: null
      },
      kcForm: {},
      fabzForm: {},
      fahbForm: {},
      bjForm: {},
      sgForm: {},
      ysForm: {},
      htqdForm: {},
      InfoCardObj: {},
      // 表单校验
      rules: {
        stepLeader: [
          {required: true, message: "负责人不能为空", trigger: "blur"}
        ],
        dateArray: [
          {required: true, message: "执行日期不能为空", trigger: "blur"}
        ],
      },
      deptPosts: [],
      recepters: [],
      phones: [],
      //所有人员对象
      userOptions: [],
      //阶段人员对象 8个阶段互相独立。。
      allStepUsers: [],
      stepUserOptions1: [],
      stepUserOptions2: [],
      stepUserOptions3: [],
      stepUserOptions4: [],
      stepUserOptions5: [],
      stepUserOptions6: [],
      stepUserOptions7: [],
      stepUserOptions8: [],
      //根据项目类型的不同应该渲染成不同的页面 (默认非居)
      projectType: 0,
      //按钮的启用/禁用(项目阶段)
      isConfirm: true,
      //当前子阶段负责人
      selectedLeader1: null,
      selectedLeader2: null,
      selectedLeader3: null,
      selectedLeader4: null,
      selectedLeader5: null,
      selectedLeader6: null,
      selectedLeader7: null,
      selectedLeader8: null,
      persons: [],
      time: ["2023-09-08 10:04:58", "2023-09-08 15:06:58"]
    };
  },
  components: {
    stageCommonForm
  },
  created() {
    const projectId = this.$route.params && this.$route.params.projectId;
    // const projectName = this.$route.query.projectName;
    // this.projectType = this.$route.params && this.$route.params.projectType;
    this.getInfo(projectId);

    setTimeout(() => {
      this.splitData();
    }, 800);


  },
  mounted() {
    // console.log("当前页面的屏幕宽度是：" + window.innerWidth + "px");
    // console.log("当前页面的屏幕高度是：" + window.innerHeight + "px");
    if (window.innerWidth < 1600) {
      // document.documentElement.style.zoom = "80%";
      document.querySelector('.app-container .rightSidebarTop .content1').style.zoom = "80%";
    } else if (window.innerWidth > 2200) {
      document.querySelector('.app-container .rightSidebarTop .content1').style.zoom = "120%";
    }
  },
  methods: {
    splitData() {
      const recepterArr = this.InfoCardObj.recepter.split("、");
      const deptPostArr = this.InfoCardObj.deptPost.split("、");
      const phoneArr = this.InfoCardObj.phone.split("、");

      const maxLength = Math.max(recepterArr.length, deptPostArr.length, phoneArr.length);

      for (let i = 0; i < maxLength; i++) {
        const person = {
          recepter: recepterArr[i] || "",
          deptPost: deptPostArr[i] || "",
          phone: phoneArr[i] || "",
        };
        this.persons.push(person);
      }
    },
    redirectToKcStageDetail() {
      this.kcForm.clickStep = 2;
      if (this.kcForm.stepStatus >= 1) {
        this.$router.push({
          path: '/project/p-info/stageMoreSlight/' + this.form.projectId,
          query: {
            projectName: this.InfoCardObj.projectName,
            clickStep: this.kcForm.clickStep
          }
        });
      } else {
        this.$message("该阶段未开始，请先阶段预设！");
      }
    },
    redirectToFabzStageDetail() {
      this.fabzForm.clickStep = 3;
      if (this.fabzForm.stepStatus >= 1) {
        this.$router.push({
          path: '/project/p-info/stageMoreSlight/' + this.form.projectId,
          query: {
            projectName: this.InfoCardObj.projectName,
            clickStep: this.fabzForm.clickStep
          }
        });
      } else {
        this.$message("该阶段未开始，请先阶段预设！");
      }
    },
    redirectToFahbStageDetail() {
      this.fahbForm.clickStep = 4;
      if (this.fahbForm.stepStatus >= 1) {
        this.$router.push({
          path: '/project/p-info/stageMoreSlight/' + this.form.projectId,
          query: {
            projectName: this.InfoCardObj.projectName,
            clickStep: this.fahbForm.clickStep
          }
        });
      } else {
        this.$message("该阶段未开始，请先阶段预设！");
      }
    },
    redirectToBjStageDetail() {
      this.bjForm.clickStep = 5;
      if (this.bjForm.stepStatus >= 1) {
        this.$router.push({
          path: '/project/p-info/stageMoreSlight/' + this.form.projectId,
          query: {
            projectName: this.InfoCardObj.projectName,
            clickStep: this.bjForm.clickStep
          }
        });
      } else {
        this.$message("该阶段未开始，请先阶段预设！");
      }
    },
    redirectToSgStageDetail() {
      this.sgForm.clickStep = 6;
      if (this.sgForm.stepStatus >= 1) {
        this.$router.push({
          path: '/project/p-info/stageMoreSlight/' + this.form.projectId,
          query: {
            projectName: this.InfoCardObj.projectName,
            //因为合同签订位置的变更
            clickStep: 7
          }
        });
      } else {
        this.$message("该阶段未开始，请先阶段预设！");
      }
    },
    redirectToYsStageDetail() {
      this.ysForm.clickStep = 7;
      if (this.ysForm.stepStatus >= 1) {
        this.$router.push({
          path: '/project/p-info/stageMoreSlight/' + this.form.projectId,
          query: {
            projectName: this.InfoCardObj.projectName,
            clickStep: 8
          }
        });
      } else {
        this.$message("该阶段未开始，请先阶段预设！");
      }
    },
    redirectToHtqdStageDetail() {
      this.htqdForm.clickStep = 8;
      if (this.htqdForm.stepStatus >= 1) {
        this.$router.push({
          path: '/project/p-info/stageMoreSlight/' + this.form.projectId,
          query: {
            projectName: this.InfoCardObj.projectName,
            clickStep: 6
          }
        });
      } else {
        this.$message("该阶段未开始，请先阶段预设！");
      }
    },
    getUserName() {
      const user = this.userOptions.find(user => user.userId === this.InfoCardObj.geo);
      return user ? user.nickName : '';
    },
    getInfo(projectId) {
      getInfo(projectId).then(response => {
        //项目信息
        this.InfoCardObj = response.data;
        this.userOptions = response.users; //对象数组
        this.allStepUsers = response.stepUsers;
        this.stepUserOptions1 = response.stepUsers;
        this.stepUserOptions2 = response.stepUsers;
        this.stepUserOptions3 = response.stepUsers;
        this.stepUserOptions4 = response.stepUsers;
        this.stepUserOptions5 = response.stepUsers;
        this.stepUserOptions6 = response.stepUsers;
        this.stepUserOptions7 = response.stepUsers;
        this.stepUserOptions8 = response.stepUsers;

        this.InfoCardObj.userIds = response.userIds;
        //需要回显的情况
        if (response.dock) {
          this.form = response.dock;
          this.updateStepUsers1();
        }
        if (response.kc) {
          this.kcForm = response.kc;
          this.updateStepUsers2();
        }
        if (response.fabz) {
          this.fabzForm = response.fabz;
          this.updateStepUsers3();
        }
        if (response.fahb) {
          this.fahbForm = response.fahb;
          this.updateStepUsers4();
        }
        if (response.bj) {
          this.bjForm = response.bj;
          this.updateStepUsers5();
        }
        if (response.sg) {
          this.sgForm = response.sg;
          this.updateStepUsers6();
        }
        if (response.ys) {
          this.ysForm = response.ys;
          this.updateStepUsers7();
        }
        if (response.htqd) {
          this.htqdForm = response.htqd;
          this.updateStepUsers8();
        }


        this.form.projectId = this.kcForm.projectId = this.fabzForm.projectId = this.fahbForm.projectId = this.bjForm.projectId
          = this.sgForm.projectId = this.ysForm.projectId = this.htqdForm.projectId = projectId;

        // console.log("htqd=",this.htqdForm.projectId)
        // console.log('InfoCardObj=', this.InfoCardObj)
      })

    },
    //组员超过6个就隐藏
    hiddenUser() {
      const userListContainer = document.getElementById('userList');

      let userListHtml = '';
      for (let i = 0; i < Math.min(userOptions.length, 5); i++) {
        const user = userOptions[i];
        if (InfoCardObj.userIds.includes(user.userId)) {
          userListHtml += `<span>${user.nickName}</span>`;
        }
      }

      if (userOptions.length > 5) {
        userListHtml += '<span>...</span>';
      }

      userListContainer.innerHTML = userListHtml;

    },
    updateStepUsers1() {
      const selectedLeader = this.form.stepLeader;
      const existingUser = this.stepUserOptions1.find(user => user.userId === selectedLeader);

      if (!existingUser) {
        this.stepUserOptions1.push({...this.selectedLeader1, disabled: true});
        this.selectedLeader1 = null;
      } else {
        this.selectedLeader1 = existingUser;
      }

      this.handleUserIdsChange1();
    },
    handleUserIdsChange1() {
      this.stepUserOptions1 = [];
      if (this.selectedLeader1) {
        this.stepUserOptions1.push({...this.selectedLeader1, disabled: true});
      }
      for (let user of this.allStepUsers) {
        if (user.userId !== this.selectedLeader1.userId) {
          this.stepUserOptions1.push({...user, disabled: false});
        }
      }
    },
    updateStepUsers2() {
      const selectedLeader = this.kcForm.stepLeader;
      const existingUser = this.stepUserOptions2.find(user => user.userId === selectedLeader);

      if (!existingUser) {
        this.stepUserOptions2.push({...this.selectedLeader2, disabled: true});
        this.selectedLeader2 = null;
      } else {
        this.selectedLeader2 = existingUser;
      }
      this.handleUserIdsChange2();
    },
    handleUserIdsChange2() {
      this.stepUserOptions2 = [];
      if (this.selectedLeader2) {
        this.stepUserOptions2.push({...this.selectedLeader2, disabled: true});
      }
      for (let user of this.allStepUsers) {
        if (user.userId !== this.selectedLeader2.userId) {
          this.stepUserOptions2.push({...user, disabled: false});
        }
      }
    },
    updateStepUsers3() {
      const selectedLeader = this.fabzForm.stepLeader;
      const existingUser = this.stepUserOptions3.find(user => user.userId === selectedLeader);

      if (!existingUser) {
        this.stepUserOptions3.push({...this.selectedLeader3, disabled: true});
        this.selectedLeader3 = null;
      } else {
        this.selectedLeader3 = existingUser;
      }
      this.handleUserIdsChange3();
    },
    handleUserIdsChange3() {
      this.stepUserOptions3 = [];
      if (this.selectedLeader3) {
        this.stepUserOptions3.push({...this.selectedLeader3, disabled: true});
      }
      for (let user of this.allStepUsers) {
        if (user.userId !== this.selectedLeader3.userId) {
          this.stepUserOptions3.push({...user, disabled: false});
        }
      }
    },
    updateStepUsers4() {
      const selectedLeader = this.fahbForm.stepLeader;
      const existingUser = this.stepUserOptions4.find(user => user.userId === selectedLeader);

      if (!existingUser) {
        this.stepUserOptions4.push({...this.selectedLeader4, disabled: true});
        this.selectedLeader4 = null;
      } else {
        this.selectedLeader4 = existingUser;
      }
      this.handleUserIdsChange4();
    },
    handleUserIdsChange4() {
      this.stepUserOptions4 = [];
      if (this.selectedLeader4) {
        this.stepUserOptions4.push({...this.selectedLeader4, disabled: true});
      }
      for (let user of this.allStepUsers) {
        if (user.userId !== this.selectedLeader4.userId) {
          this.stepUserOptions4.push({...user, disabled: false});
        }
      }
    },
    updateStepUsers5() {
      const selectedLeader = this.bjForm.stepLeader;
      const existingUser = this.stepUserOptions5.find(user => user.userId === selectedLeader);

      if (!existingUser) {
        this.stepUserOptions5.push({...this.selectedLeader5, disabled: true});
        this.selectedLeader5 = null;
      } else {
        this.selectedLeader5 = existingUser;
      }
      this.handleUserIdsChange5();
    },
    handleUserIdsChange5() {
      this.stepUserOptions5 = [];
      if (this.selectedLeader5) {
        this.stepUserOptions5.push({...this.selectedLeader5, disabled: true});
      }
      for (let user of this.allStepUsers) {
        if (user.userId !== this.selectedLeader5.userId) {
          this.stepUserOptions5.push({...user, disabled: false});
        }
      }
    },
    updateStepUsers6() {
      const selectedLeader = this.sgForm.stepLeader;
      const existingUser = this.stepUserOptions6.find(user => user.userId === selectedLeader);

      if (!existingUser) {
        this.stepUserOptions6.push({...this.selectedLeader6, disabled: true});
        this.selectedLeader6 = null;
      } else {
        this.selectedLeader6 = existingUser;
      }
      this.handleUserIdsChange6();
    },
    handleUserIdsChange6() {
      this.stepUserOptions6 = [];
      if (this.selectedLeader6) {
        this.stepUserOptions6.push({...this.selectedLeader6, disabled: true});
      }
      for (let user of this.allStepUsers) {
        if (user.userId !== this.selectedLeader6.userId) {
          this.stepUserOptions6.push({...user, disabled: false});
        }
      }
    },
    updateStepUsers7() {
      const selectedLeader = this.ysForm.stepLeader;
      const existingUser = this.stepUserOptions7.find(user => user.userId === selectedLeader);

      if (!existingUser) {
        this.stepUserOptions7.push({...this.selectedLeader7, disabled: true});
        this.selectedLeader7 = null;
      } else {
        this.selectedLeader7 = existingUser;
      }
      this.handleUserIdsChange7();
    },
    handleUserIdsChange7() {
      this.stepUserOptions7 = [];
      if (this.selectedLeader7) {
        this.stepUserOptions7.push({...this.selectedLeader7, disabled: true});
      }
      for (let user of this.allStepUsers) {
        if (user.userId !== this.selectedLeader7.userId) {
          this.stepUserOptions7.push({...user, disabled: false});
        }
      }
    },
    updateStepUsers8() {
      const selectedLeader = this.htqdForm.stepLeader;
      const existingUser = this.stepUserOptions8.find(user => user.userId === selectedLeader);

      if (!existingUser) {
        this.stepUserOptions8.push({...this.selectedLeader8, disabled: true});
        this.selectedLeader8 = null;
      } else {
        this.selectedLeader8 = existingUser;
      }
      this.handleUserIdsChange8();
    },
    handleUserIdsChange8() {
      this.stepUserOptions8 = [];
      if (this.selectedLeader8) {
        this.stepUserOptions8.push({...this.selectedLeader8, disabled: true});
      }
      for (let user of this.allStepUsers) {
        if (user.userId !== this.selectedLeader8.userId) {
          this.stepUserOptions8.push({...user, disabled: false});
        }
      }
    },
    openDockStage() {
      this.form.clickStep = 1;

      this.openDock = true;
      this.title = "对接—阶段预设";
    },
    openExplorationStage() {
      this.kcForm.clickStep = 2;

      this.openKc = true;
      this.title = "勘察—阶段预设";
    },
    openPlanPreparationStage() {
      this.fabzForm.clickStep = 3;

      this.openFabz = true;
      this.title = "方案编制—阶段预设";
    },
    openPlanReportStage() {
      this.fahbForm.clickStep = 4;

      this.openFahb = true;
      this.title = "方案汇报—阶段预设";
    },
    openQuotationStage() {
      this.bjForm.clickStep = 5;

      this.openBj = true;
      this.title = "报价—阶段预设";
    },
    openConstructionStage() {
      this.sgForm.clickStep = 6;

      this.openSg = true;
      this.title = "施工—阶段预设";
    },
    openAcceptStage() {
      this.ysForm.clickStep = 7;

      this.openYs = true;
      this.title = "验收—阶段预设";
    },
    openContractSignStage() {
      this.htqdForm.clickStep = 8;

      this.openHtqd = true;
      this.title = "合同签订—阶段预设";
    },
    stageOver1() {
      this.form.clickStep = 1;
      this.$modal.confirm('是否结束当前阶段？')
        .then(() => {
          stageOver(this.form.projectId, this.form.clickStep)
            .then(() => {
              this.$modal.msgSuccess("提交成功");
              this.getInfo(this.form.projectId);
              // this.$router.go(0);
            })
            .catch((error) => {
              console.log(error);
            });
        })
        .catch((msg) => {
          console.log(msg);
        });
    },
    stageOver2() {
      this.kcForm.clickStep = 2;
      this.$modal.confirm('是否结束当前阶段？')
        .then(() => {
          stageOver(this.form.projectId, this.kcForm.clickStep)
            .then(() => {
              this.$modal.msgSuccess("提交成功");
              this.getInfo(this.form.projectId);
              this.$router.go(0);
            })
            .catch((error) => {
              console.log(error);
            });
        })
        .catch((msg) => {
          console.log(msg);
        });
    },
    stageOver3() {
      this.fabzForm.clickStep = 3;
      this.$modal.confirm('是否结束当前阶段？')
        .then(() => {
          stageOver(this.form.projectId, this.fabzForm.clickStep)
            .then(() => {
              this.$modal.msgSuccess("提交成功");
              this.getInfo(this.form.projectId);
              this.$router.go(0);
            })
            .catch((error) => {
              console.log(error);
            });
        })
        .catch((msg) => {
          console.log(msg);
        });
    },
    stageOver4() {
      this.fahbForm.clickStep = 4;
      this.$modal.confirm('是否结束当前阶段？')
        .then(() => {
          stageOver(this.form.projectId, this.fahbForm.clickStep)
            .then(() => {
              this.$modal.msgSuccess("提交成功");
              this.getInfo(this.form.projectId);
              this.$router.go(0);
            })
            .catch((error) => {
              console.log(error);
            });
        })
        .catch((msg) => {
          console.log(msg);
        });
    },
    stageOver5() {
      this.bjForm.clickStep = 5;
      this.$modal.confirm('是否结束当前阶段？')
        .then(() => {
          stageOver(this.form.projectId, this.bjForm.clickStep)
            .then(() => {
              this.$modal.msgSuccess("提交成功");
              this.getInfo(this.form.projectId);
              this.$router.go(0);
            })
            .catch((error) => {
              console.log(error);
            });
        })
        .catch((msg) => {
          console.log(msg);
        });
    },
    stageOver6() {
      this.sgForm.clickStep = 6;
      this.$modal.confirm('是否结束当前阶段？')
        .then(() => {
          stageOver(this.form.projectId, this.sgForm.clickStep)
            .then(() => {
              this.$modal.msgSuccess("提交成功");
              this.getInfo(this.form.projectId);
              this.$router.go(0);
            })
            .catch((error) => {
              console.log(error);
            });
        })
        .catch((msg) => {
          console.log(msg);
        });
    },
    stageOver7() {
      this.ysForm.clickStep = 7;
      this.$modal.confirm('是否结束当前阶段？')
        .then(() => {
          stageOver(this.form.projectId, this.ysForm.clickStep)
            .then(() => {
              this.$modal.msgSuccess("提交成功");
              this.getInfo(this.form.projectId);
              this.$router.go(0);
            })
            .catch((error) => {
              console.log(error);
            });
        })
        .catch((msg) => {
          console.log(msg);
        });
    },
    stageOver8() {
      this.htqdForm.clickStep = 8;
      this.$modal.confirm('是否结束当前阶段？')
        .then(() => {
          stageOver(this.form.projectId, this.htqdForm.clickStep)
            .then(() => {
              this.$modal.msgSuccess("提交成功");
              this.getInfo(this.form.projectId);
              this.$router.go(0);
            })
            .catch((error) => {
              console.log(error);
            });
        })
        .catch((msg) => {
          console.log(msg);
        });
    },

    submitForm1: function () {
      console.log("form=", this.form)
      // console.log("time=", this.time)
      this.$refs["form"].validate(valid => {
        if (valid) {
          submitStep(this.form).then(response => {
            this.$modal.msgSuccess("提交成功");
            this.openDock = false;
            EventBus.$emit('update-is-yusheDJ', true);
            this.getInfo(this.form.projectId)
          });
        }
      });
    },
    submitForm2: function () {
      console.log("kcForm=", this.kcForm)
      this.$refs["kcForm"].validate(valid => {
        if (valid) {
          submitStep(this.kcForm).then(response => {
            this.$modal.msgSuccess("提交成功");
            this.openKc = false;
            EventBus.$emit('update-is-yusheKC', true);
            this.getInfo(this.kcForm.projectId)
          });
        }
      });
    },
    submitForm3: function () {
      console.log("fabzForm=", this.fabzForm)
      this.$refs["fabzForm"].validate(valid => {
        if (valid) {
          submitStep(this.fabzForm).then(response => {
            this.$modal.msgSuccess("提交成功");
            this.openFabz = false;
            EventBus.$emit('update-is-yusheFABZ', true);
            this.getInfo(this.fabzForm.projectId)
          });
        }
      });
    },
    submitForm4: function () {
      console.log("fahbForm=", this.fahbForm)
      this.$refs["fahbForm"].validate(valid => {
        if (valid) {
          submitStep(this.fahbForm).then(response => {
            this.$modal.msgSuccess("提交成功");
            this.openFahb = false;
            EventBus.$emit('update-is-yusheFAHB', true);
            this.getInfo(this.fahbForm.projectId)
          });
        }
      });
    },
    submitForm5: function () {
      console.log("bjForm=", this.bjForm)
      this.$refs["bjForm"].validate(valid => {
        if (valid) {
          submitStep(this.bjForm).then(response => {
            this.$modal.msgSuccess("提交成功");
            this.openBj = false;
            EventBus.$emit('update-is-yusheBJ', true);
            this.getInfo(this.bjForm.projectId)
          });
        }
      });
    },
    submitForm6: function () {
      console.log("sgForm=", this.sgForm)
      this.$refs["sgForm"].validate(valid => {
        if (valid) {
          submitStep(this.sgForm).then(response => {
            this.$modal.msgSuccess("提交成功");
            this.openSg = false;
            EventBus.$emit('update-is-yusheSG', true);
            this.getInfo(this.sgForm.projectId)
          });
        }
      });
    },
    submitForm7: function () {
      console.log("ysForm=", this.ysForm)
      this.$refs["ysForm"].validate(valid => {
        if (valid) {
          submitStep(this.ysForm).then(response => {
            this.$modal.msgSuccess("提交成功");
            this.openYs = false;
            EventBus.$emit('update-is-yusheYS', true);
            this.getInfo(this.ysForm.projectId)
          });
        }
      });
    },
    submitForm8: function () {
      console.log("htqdForm=", this.htqdForm)
      this.$refs["htqdForm"].validate(valid => {
        if (valid) {
          submitStep(this.htqdForm).then(response => {
            this.$modal.msgSuccess("提交成功");
            this.openHtqd = false;
            EventBus.$emit('update-is-yusheHTQD', true);
            this.getInfo(this.htqdForm.projectId)
          });
        }
      });
    },
    handleClose1() {
      this.openDock = false;
      this.getInfo(this.form.projectId)
    },
    cancel1() {
      this.openDock = false;
      this.getInfo(this.form.projectId)
    },
    handleClose2() {
      this.openKc = false;
      this.getInfo(this.form.projectId)
    },
    cancel2() {
      this.openKc = false;
      this.getInfo(this.form.projectId)
    },
    handleClose3() {
      this.openFabz = false;
      this.getInfo(this.form.projectId)
    },
    cancel3() {
      this.openFabz = false;
      this.getInfo(this.form.projectId)
    },
    handleClose4() {
      this.openFahb = false;
      this.getInfo(this.form.projectId)
    },
    cancel4() {
      this.openFahb = false;
      this.getInfo(this.form.projectId)
    },
    handleClose5() {
      this.openBj = false;
      this.getInfo(this.form.projectId)
    },
    cancel5() {
      this.openBj = false;
      this.getInfo(this.form.projectId)
    },
    handleClose6() {
      this.openSg = false;
      this.getInfo(this.form.projectId)
    },
    cancel6() {
      this.openSg = false;
      this.getInfo(this.form.projectId)
    },
    handleClose7() {
      this.openYs = false;
      this.getInfo(this.form.projectId)
    },
    cancel7() {
      this.openYs = false;
      this.getInfo(this.form.projectId)
    },
    handleClose8() {
      this.openHtqd = false;
      this.getInfo(this.form.projectId)
    },
    cancel8() {
      this.openHtqd = false;
      this.getInfo(this.form.projectId)
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.projectId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },


  }
};
</script>

<style lang="scss" scoped>@import "~@/assets/styles/InspectionFrame.scss";</style>

<style lang="scss">
//.app-container {
//  .main {
//    .main2 {
//      .mainContent {
//        .el-table {
//          height: 100%;
//        }
//      }
//    }
//  }
//}

.enablestatus {
  .dictRed {
    color: #f56c6c;
  }

  .dictBlue {
    color: #1890ff;
  }

  .dictGrey {
    color: #909399;
  }
}
</style>

<!--elementui组件样式-->
<style lang="scss">
.el-descriptions__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 8px;
}

.el-descriptions-item__label {
  width: 140px; /* 设置标签宽度，这里示例设置为 100px */
}

.el-descriptions__title {
  font-size: 16px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #606266;

}

.esri-ui-manual-container > .esri-component {
  display: none;
}
</style>

<style lang="scss" scoped>
.mapTitle {
  padding: 10px;
  //background-image: url("~@/assets/images/background.jpg");
}

.big {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 0;
  padding: 0;

  #viewDiv {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
}

.buttons_Combine {
  display: flex;
  justify-content: flex-end;
}


.app-container {
  .main {
    .main2 {
      .mainContent {
        margin: 0;
        height: calc(100% - 46px);
        overflow: auto;

        ::v-deep.el-table--border .el-table__cell .cell {
          border-right: none;
          line-height: 23px;
          padding: 0;
        }

        ::v-deep.el-table {
          height: 100%;
        }

        ::v-deep.el-table__body-wrapper {
          height: calc(100% - 45px);
          overflow: auto;
        }

        ::v-deep.el-tag--medium {
          height: 23px;
          line-height: 23px;
        }
      }
    }

    ::v-deep.el-tabs--top {
      padding: 5px 10px;
      padding-top: 0;
    }

    .ToolBar {
      button {
        padding: 10px 10px;
      }
    }
  }

  //下半
  .rightSidebarTop {
    //.content {
    //  padding: 1.15% 10px;
    //  height: 100%;
    //  background: #ffffff;
    //  border-radius: 4px;
    //  border: 1px solid #dcdfe6;
    //  overflow: auto;
    //  display: grid;
    //  grid-template-columns: repeat(4, 1fr); /* 一行四列 */
    //  //grid-column-gap: 10px;
    //  //grid-column-gap: 44%;
    //  //grid-row-gap: 10px;
    //
    //}

    //项目阶段容器
    .content1 {
      padding: 10px;
      height: 100%;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      overflow: auto;
      zoom: 1;
    }

    .content2 {
      padding-left: 3.5%;
      //padding-right: 10px;
      padding-right: 3.5%;
      height: 100%;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      overflow: auto;

    }


  }

  .rightSidebarBottom {
    ::v-deep.el-date-editor.el-input {
      width: auto;
    }

    ::v-deep.el-tabs__content {
      overflow: visible;
    }

    ::v-deep.el-form-item {
      margin-bottom: 15px;
    }

    ::v-deep.el-form-item__error {
      padding-top: 2px;
    }

    .LogCard {
      margin-bottom: 5px;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #606266;

      .LogTime {
        background: #f4f4f5;
        border-radius: 4px 4px 0px 0px;
      }

      .LogRow {
        display: flex;
        justify-content: space-between;
        padding: 10px 15px;
        border-bottom: 1px solid #dcdfe6;
      }
    }
  }


}

</style>

<style lang="scss" scoped>
#PrintMainTable {
  .el-table .caret-wrapper {
    height: 28px;

    .sort-caret.ascending {
      top: 3px;
    }

    .sort-caret.descending {
      bottom: 3px;
    }
  }
}

.stageYSButton {
  text-align: right;
  margin-top: 10px;
  //margin-right: 15px;
}

.stage {
  width: 400px;
  height: 213px;
  position: relative;
  background-color: rgba(250, 250, 250, 1);
  border-radius: 10px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
  background: #FAFAFA;
  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.16);
  opacity: 1;
}

.stage.margin {
  margin-right: 50px;

  .runContentButton1 {
    cursor: pointer;
    width: 42%;
    margin-left: 2%;
    margin-right: 2%;
    height: 38px;
    border-radius: 4px;
    //background-color: rgba(0, 0, 0, 0.16);
    background: #F5F5F5;
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.16);
    border: none;
    opacity: 1;
    font-size: 14px;
    //font-size: 1.5vh;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: bold;
    color: #6A6A6A;
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */

    &:hover{
      background: rgba(41, 121, 255, 1);
      color: #F5F5F5;
    }
  }

  //.runContentButton2 {
  //  cursor: pointer;
  //  width: 100%;
  //  margin-left: 2%;
  //  margin-right: 2%;
  //  height: 38px;
  //  border-radius: 4px;
  //  background-color: rgba(0, 0, 0, 0.16);
  //  border: none;
  //  font-size: 14px;
  //  font-weight: bold;
  //  color: white;
  //  user-select: none;
  //  -webkit-user-select: none; /* Safari */
  //  -moz-user-select: none; /* Firefox */
  //  -ms-user-select: none; /* Internet Explorer/Edge */
  //
  //}

  &:hover {
    box-shadow: 0 0 0 1px rgba(41, 121, 255, 1);

    img:first-child {
      width: 16px;
      height: 16px;
      margin-left: 30px;
      margin-top: 2.5px;
      filter: grayscale(100%) invert(40%) sepia(100%) brightness(0.7) saturate(8) hue-rotate(200deg);
    }

  }
}

.stage1 {
  width: 400px;
  height: 213px;
  position: relative;
  //background-color: rgba(250, 250, 250, 1);
  //border-radius: 10px;
  //box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
  //background: #FAFAFA;
  //box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.16);
  //opacity: 1;
}

.stage1.margin {
  margin-right: 50px;
}

.stageFont {
  //font-size: 1.7vh;
  font-size: 16px;
  font-weight: bold;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  color: #6A6A6A;
}

.stageTitle {
  margin-left: 5px;
  width: 141px;
}

.workDiv {
  margin-left: 19%;
}

.workText {
  float: left;
}

.workIcon {
  width: 18px;
  height: 18px;
  float: left;
  margin-left: 5px;
}

.iconStart {
  width: 16px;
  height: 16px;
  margin-left: 30px;
  margin-top: 2.5px;
}

.el-form-item:first-child .el-select,
.el-form-item:first-child .el-input__inner,
.el-form-item:nth-child(2) .el-select,
.el-form-item:nth-child(2) .el-input__inner {
  width: 100%;
}


.centerPosition {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #606266;
}

.centerPosition .stageFont .runDate {
  margin-top: 16px;
}


</style>
